<template>
	<div class="form-rules-one-container">
		<el-row class="mb20">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="order-info">
				<div style="display: flex;justify-content: space-between;">
				<el-radio-group v-model="state.radio"  @change="onRadioChange">
					<el-radio-button label="-1">全部</el-radio-button>
					<el-radio-button label="1">计次卡50条</el-radio-button>
					<el-radio-button label="2">计时卡50条</el-radio-button>
					<el-radio-button label="3">计时卡1条</el-radio-button>
					<el-radio-button label="4">计时计次卡1条</el-radio-button>
					
				</el-radio-group>
				<div style="display: flex;">
					<el-input  placeholder="请输入关键字搜索" style="max-width: 380px" class="ml20"> </el-input>
					<el-button  type="primary" class="ml20">
						<el-icon>
							<ele-Search />
						</el-icon>
						查询
				</el-button>
				</div>
				
				</div>
			</el-col>
		</el-row>
		
		<el-table :data="state.tableData" border row-key="id" style="width: 100%" v-loading="state.loading"
			@selection-change="onSelectionChange">
			<el-table-column label="卡项ID" width="80">
				<template #default="scope">
					<span>{{ scope.row.id }}</span>
				</template>
			</el-table-column>
			<el-table-column label="卡项名称">
				<template #default="scope">
					<span>卡项名称</span>
				</template>
			</el-table-column>
			<el-table-column label="规格">
				<template #default="scope">
					<span>规格</span>
				</template>
			</el-table-column>
			<el-table-column label="属性">
				<template #default="scope">
					<span>属性</span>
				</template>
			</el-table-column>
			<el-table-column label="剩余数量">
				<template #default="scope">
					<span>剩余数量</span>
				</template>
			</el-table-column>
			<el-table-column label="剩余次数/时间">
				<template #default="scope">
					<span>剩余次数/时间</span>
				</template>
			</el-table-column>
			<el-table-column label="可用次数">
				<template #default="scope">
					<span>可用次数</span>
				</template>
			</el-table-column>
			<el-table-column label="欠款金额">
				<template #default="scope">
					<span>欠款金额</span>
				</template>
			</el-table-column>
			<el-table-column label="未激活数量">
				<template #default="scope">
					<span>未激活数量</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="100">
				<template #default="scope">
					<el-button  text type="primary" @click="onOpenEditRole()">
						详情
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-footer mt15" style="display: flex; justify-content: flex-end;">
			<el-pagination v-model:current-page="state.param.pageNum" v-model:page-size="state.param.pageSize"
				:pager-count="5" :page-sizes="[10, 20, 30]" :total="state.total"
				layout="total, sizes, prev, pager, next, jumper" background @size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange">
			</el-pagination>
		</div>
		<shengyukaxiangDialog ref="shengyukaxiangDialogRef" />
	</div>
</template>
<script setup lang="ts" name="pagesFormRulesOne">
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import type { saleOrderListData, } from "/@/types/order";
import { orderQuery } from "/@/api/order";
const shengyukaxiangDialog = defineAsyncComponent(() => import('/@/views/member/statistics/components/shengyukaxiangDialog.vue'));

const shengyukaxiangDialogRef = ref();

// 定义父组件传过来的值
const props = defineProps({
	data: {
		type: Number,
		default: () => { },
	},
});

// 定义变量内容
const state = reactive({
	loading: false,
	param: {
		type: 0,
		pageNum: 1,
		pageSize: 10,
	},
	total: 0,
	tableData: [] as Array<saleOrderListData>
});

// 获取订单列表
const getOrderList = async () => {
	state.loading = true;
	const { results } = await orderQuery(state.param);
	state.loading = false;
	state.tableData = results.records.slice(0,1);
	state.total = results.total;
}

// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getOrderList();
};

// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getOrderList();
};

// 赋值回显
const initForm = () => {
	state.param.type = props.data;
	getOrderList();
};

// 订单详情
const onOpenEditRole = (item?: any) => {
	shengyukaxiangDialogRef.value.openDialog();
};

// 页面加载时
onMounted(() => {
	initForm();
});


</script>
